<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2024-06-25 14:50:05
 * @LastEditTime: 2024-06-25 21:02:51
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <el-card shadow="never" text-center>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="intro">
        <template #title>
          <SectionTitle title="理赔流程" />
        </template>
        <el-card shadow="hover" text-left>
          <p v-for="(t, i) in processContent" :key="i">{{ t }}</p>
        </el-card>
      </el-collapse-item>
      <el-collapse-item name="data">
        <template #title>
          <SectionTitle title="理赔材料" />
        </template>
        <el-card shadow="hover">
          <e-table
            :data="tableData"
            :columns="columns"
            :pageData="pageData"
          >
            <template #data="{ scope }">
              <el-select v-model="scope.row.data" placeholder="请选择理赔材料" @change="dataChange($event, scope.row)">
                <el-option value="1">111</el-option>
              </el-select>
            </template>
          </e-table>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <el-button m-40px type="primary" :icon="Edit" size="large" @click="report">我要报案</el-button>
  </el-card>
</template>

<script setup>

import { Edit } from '@element-plus/icons-vue'
import SectionTitle from '@/components/SectionTitle/index.vue'
import eTable from '@/components/e-table'
import columns from './columns'

const activeNames = ['intro', 'data']

const pageData = ref({
  pageShow: false,
  current: 1,
  size: 10,
})

const processContent = [
  '第一步:保险事故发生后，建议您直接拨打对应该保险公司电话，如果情况非常紧急，需要救援公司救助，请拨打对应保险公司救援电话;',
  '第二步:根据理赔材料清单，准备好相关的材料和票据，并将准备好的理赔材料快递至旅云保;',
  '第三步:旅云保对收到的材料进行初审，通过初审后将材料递送至保险公司理赔部，并通过绿色通道进行理赔;',
  '第四步:保险公司收到材料后按照流程进行理赔;',
  '第五步:保险公司反馈最终理赔结果。'
]

const tableData = ref([
  { ip: '1111', id: 1 },
  { ip: '22222', id: 2 }
])

const report = () => {
  console.log('report');
}

const dataChange = (value, row) => {
  console.log(value, row);
}

onMounted(() => {
  console.log('onMounted');
})

</script>
